<template>
  <div class="security-section">
    <div class="section-header">
      <h2 class="section-title">安全设置</h2>
      <p class="section-desc">保护您的账户安全，管理登录和验证方式</p>
    </div>

    <!-- 密码修改 -->
    <div class="security-card">
      <div class="card-header">
        <h3 class="card-title">
          <LockOutlined />
          密码管理
        </h3>
        <p class="card-desc">定期更换密码，保护账户安全</p>
      </div>

      <a-form
        :model="passwordForm"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        @finish="changePassword"
      >
        <a-form-item
          label="当前密码"
          name="currentPassword"
          :rules="[{ required: true, message: '请输入当前密码' }]"
        >
          <a-input-password
            v-model:value="passwordForm.currentPassword"
            placeholder="请输入当前密码"
          />
        </a-form-item>

        <a-form-item label="新密码" name="newPassword" :rules="passwordRules">
          <a-input-password v-model:value="passwordForm.newPassword" placeholder="请输入新密码" />
        </a-form-item>

        <a-form-item
          label="确认新密码"
          name="confirmPassword"
          :rules="[
            { required: true, message: '请确认新密码' },
            { validator: validateConfirmPassword },
          ]"
        >
          <a-input-password
            v-model:value="passwordForm.confirmPassword"
            placeholder="请再次输入新密码"
          />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 6, span: 18 }">
          <a-button type="primary" html-type="submit" :loading="passwordLoading">
            <SaveOutlined />
            修改密码
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <!-- 第三方账号绑定 -->
    <div class="security-card">
      <div class="card-header">
        <h3 class="card-title">
          <LinkOutlined />
          第三方账号绑定
        </h3>
        <p class="card-desc">绑定第三方账号，方便快捷登录</p>
      </div>

      <div class="binding-list">
        <div v-for="platform in thirdPartyPlatforms" :key="platform.key" class="binding-item">
          <div class="platform-info">
            <div class="platform-icon" :style="{ background: platform.color }">
              <component :is="platform.icon" />
            </div>
            <div class="platform-details">
              <div class="platform-name">{{ platform.name }}</div>
              <div class="platform-desc">{{ platform.description }}</div>
            </div>
          </div>

          <div class="binding-action">
            <template v-if="platform.bound">
              <a-tag color="success">已绑定</a-tag>
              <a-button type="link" danger @click="unbindPlatform(platform.key)"> 解绑 </a-button>
            </template>
            <template v-else>
              <a-button type="primary" @click="bindPlatform(platform.key)"> 绑定 </a-button>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 登录保护 -->
    <div class="security-card">
      <div class="card-header">
        <h3 class="card-title">
          <ShieldOutlined />
          登录保护
        </h3>
        <p class="card-desc">增强账户安全性，防止恶意登录</p>
      </div>

      <div class="protection-list">
        <div class="protection-item">
          <div class="protection-info">
            <div class="protection-name">二次验证</div>
            <div class="protection-desc">登录时需要手机验证码确认</div>
          </div>
          <a-switch
            v-model:checked="securitySettings.twoFactorAuth"
            @change="toggleTwoFactorAuth"
          />
        </div>

        <div class="protection-item">
          <div class="protection-info">
            <div class="protection-name">异地登录提醒</div>
            <div class="protection-desc">检测到异地登录时发送提醒</div>
          </div>
          <a-switch
            v-model:checked="securitySettings.locationAlert"
            @change="toggleLocationAlert"
          />
        </div>

        <div class="protection-item">
          <div class="protection-info">
            <div class="protection-name">登录设备管理</div>
            <div class="protection-desc">查看和管理已登录的设备</div>
          </div>
          <a-button type="link" @click="showDeviceModal = true"> 管理设备 </a-button>
        </div>
      </div>
    </div>

    <!-- 账号注销 -->
    <div class="security-card danger-card">
      <div class="card-header">
        <h3 class="card-title">
          <ExclamationCircleOutlined />
          危险操作
        </h3>
        <p class="card-desc">请谨慎操作，以下操作不可逆</p>
      </div>

      <div class="danger-actions">
        <a-button danger @click="showDeleteModal = true">
          <DeleteOutlined />
          注销账号
        </a-button>
        <p class="danger-warning">注销后将无法恢复账号数据，请确保已备份重要信息</p>
      </div>
    </div>

    <!-- 设备管理模态框 -->
    <a-modal v-model:open="showDeviceModal" title="登录设备管理" width="600px" :footer="null">
      <div class="device-list">
        <div v-for="device in loginDevices" :key="device.id" class="device-item">
          <div class="device-info">
            <div class="device-name">{{ device.name }}</div>
            <div class="device-details">
              <span>{{ device.location }}</span>
              <span>{{ device.lastLogin }}</span>
            </div>
          </div>
          <div class="device-actions">
            <a-tag v-if="device.current" color="green">当前设备</a-tag>
            <a-button v-else type="link" danger @click="removeDevice(device.id)"> 移除 </a-button>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 账号注销确认模态框 -->
    <a-modal
      v-model:open="showDeleteModal"
      title="确认注销账号"
      width="500px"
      @ok="deleteAccount"
      ok-text="确认注销"
      cancel-text="取消"
      ok-type="danger"
    >
      <div class="delete-warning">
        <ExclamationCircleOutlined class="warning-icon" />
        <div class="warning-content">
          <h4>注销账号将会：</h4>
          <ul>
            <li>永久删除您的个人信息和学习记录</li>
            <li>清空所有课程进度和成绩</li>
            <li>无法恢复任何数据</li>
          </ul>
          <p>请输入您的密码确认注销：</p>
          <a-input-password v-model:value="deletePassword" placeholder="请输入密码确认" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import {
  LockOutlined,
  LinkOutlined,
  // ShieldOutlined,
  ExclamationCircleOutlined,
  DeleteOutlined,
  SaveOutlined,
  WechatOutlined,
  QqOutlined,
  WeiboOutlined,
} from '@ant-design/icons-vue'

// 密码表单
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
})

const passwordLoading = ref(false)

// 密码验证规则
const passwordRules = [
  { required: true, message: '请输入新密码' },
  { min: 6, message: '密码长度至少6位' },
  { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, message: '密码需包含大小写字母和数字' },
]

// 确认密码验证
const validateConfirmPassword = (_rule: any, value: string) => {
  if (value && value !== passwordForm.newPassword) {
    return Promise.reject('两次输入的密码不一致')
  }
  return Promise.resolve()
}

// 第三方平台
const thirdPartyPlatforms = ref([
  {
    key: 'wechat',
    name: '微信',
    description: '使用微信账号快速登录',
    icon: WechatOutlined,
    color: '#07c160',
    bound: true,
  },
  {
    key: 'qq',
    name: 'QQ',
    description: '使用QQ账号快速登录',
    icon: QqOutlined,
    color: '#1296db',
    bound: false,
  },
  {
    key: 'weibo',
    name: '微博',
    description: '使用微博账号快速登录',
    icon: WeiboOutlined,
    color: '#e6162d',
    bound: false,
  },
])

// 安全设置
const securitySettings = reactive({
  twoFactorAuth: true,
  locationAlert: true,
})

// 登录设备
const loginDevices = ref([
  {
    id: '1',
    name: 'Windows Chrome',
    location: '北京市',
    lastLogin: '2024-01-20 14:30',
    current: true,
  },
  {
    id: '2',
    name: 'iPhone Safari',
    location: '上海市',
    lastLogin: '2024-01-19 09:15',
    current: false,
  },
])

// 模态框状态
const showDeviceModal = ref(false)
const showDeleteModal = ref(false)
const deletePassword = ref('')

// 修改密码
const changePassword = async () => {
  passwordLoading.value = true
  try {
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 1000))
    message.success('密码修改成功！')
    Object.assign(passwordForm, {
      currentPassword: '',
      newPassword: '',
      confirmPassword: '',
    })
  } catch (error) {
    message.error('密码修改失败，请重试')
  } finally {
    passwordLoading.value = false
  }
}

// 绑定第三方平台
const bindPlatform = (platform: string) => {
  message.info(`正在跳转到${platform}授权页面...`)
  // 模拟绑定成功
  setTimeout(() => {
    const platformItem = thirdPartyPlatforms.value.find((p) => p.key === platform)
    if (platformItem) {
      platformItem.bound = true
      message.success('绑定成功！')
    }
  }, 2000)
}

// 解绑第三方平台
const unbindPlatform = (platform: string) => {
  const platformItem = thirdPartyPlatforms.value.find((p) => p.key === platform)
  if (platformItem) {
    platformItem.bound = false
    message.success('解绑成功！')
  }
}

// 切换二次验证
const toggleTwoFactorAuth = (checked: boolean) => {
  message.info(checked ? '二次验证已开启' : '二次验证已关闭')
}

// 切换异地登录提醒
const toggleLocationAlert = (checked: boolean) => {
  message.info(checked ? '异地登录提醒已开启' : '异地登录提醒已关闭')
}

// 移除设备
const removeDevice = (deviceId: string) => {
  const index = loginDevices.value.findIndex((d) => d.id === deviceId)
  if (index > -1) {
    loginDevices.value.splice(index, 1)
    message.success('设备已移除')
  }
}

// 注销账号
const deleteAccount = async () => {
  if (!deletePassword.value) {
    message.warning('请输入密码确认')
    return
  }

  try {
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 1000))
    message.success('账号注销成功')
    showDeleteModal.value = false
  } catch (error) {
    message.error('注销失败，请重试')
  }
}
</script>

<style scoped>
.security-section {
  max-width: 800px;
}

.section-header {
  margin-bottom: 24px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.section-desc {
  color: #666;
  margin: 0;
}

.security-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.danger-card {
  border-color: #ffccc7;
  background: #fff2f0;
}

.card-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-desc {
  color: #666;
  margin: 0;
}

.binding-list,
.protection-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.binding-item,
.protection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.platform-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.platform-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.platform-details {
  display: flex;
  flex-direction: column;
}

.platform-name,
.protection-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.platform-desc,
.protection-desc {
  color: #666;
  font-size: 14px;
}

.binding-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

.danger-actions {
  text-align: center;
}

.danger-warning {
  color: #ff4d4f;
  font-size: 14px;
  margin-top: 12px;
  margin-bottom: 0;
}

.device-list {
  max-height: 400px;
  overflow-y: auto;
}

.device-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.device-item:last-child {
  border-bottom: none;
}

.device-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.device-details {
  color: #666;
  font-size: 14px;
}

.device-details span {
  margin-right: 16px;
}

.delete-warning {
  display: flex;
  gap: 16px;
}

.warning-icon {
  color: #ff4d4f;
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 4px;
}

.warning-content h4 {
  color: #333;
  margin: 0 0 12px 0;
}

.warning-content ul {
  color: #666;
  margin: 0 0 16px 0;
  padding-left: 20px;
}

.warning-content p {
  color: #333;
  margin: 16px 0 8px 0;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .binding-item,
  .protection-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .binding-action,
  .device-actions {
    align-self: flex-end;
  }

  .delete-warning {
    flex-direction: column;
    gap: 12px;
  }
}
</style>
